<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="./assist/style/offset.css" />
    <style>
      .container {
        margin: 400px auto;
        width: 800px;
        height: 1100px;
        background-color: skyblue;
      }

      .back {
        display: none;
        position: fixed;
        top: 500px;
        right: 10px;
        width: 80px;
        height: 150px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <!-- HTML结构 -->
    <div class="back">返回顶部</div>
    <div class="container"></div>

    <!-- js 代码 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(function () {
        // scrollTop() 有参数就是设置位置，这里设置初始位置是头部被卷去100的位置
        $(document).scrollTop(100)
        // 被卷去的头部 scrollTop()   被卷去的左侧 scrollLeft()
        // 页面滚动事件scroll()
        // （1）在滚动之前获取container盒子距离文档顶部的值
        let boxTop = $('.container').offset().top
        $(window).scroll(function () {
          //  （2）获取页面头部被卷去的值
          let top = $(document).scrollTop()
          //  （3）如果被卷去的值大于等于boxTop，则淡入返回顶部盒子
          if (top >= boxTop) {
            $('.back').fadeIn()
            // 否则淡出返回顶部盒子
          } else {
            $('.back').fadeOut()
          }
        })
        // (4) 实现返回顶部的效果
        $('.back').click(function () {
          // 本质就是被卷去的头部值为0
          // 只有元素才可以做动画
          // .stop() 是让运动的元素立即停止动画
          $('body,html').stop().animate(
            {
              scrollTop: 0,
            },
            500
          )
        })
      })
    </script>
  </body>
</html>
